<template>
	<view class="my-page">
		<!-- <nav-header title="个人中心"></nav-header> -->

		<view class="content">
		<!-- <view class="content" :style="{ paddingTop: statusBarHeight + 44 + 'px' }"> -->
			<!-- User Profile -->
			<view class="user-profile">
				<view class="avatar-container">
					<image class="avatar" src="/static/images/logo1.png"
						mode="aspectFill"></image>
				</view>
				<view class="user-info">
					<text class="username">{{ userInfo?.nickName || '未登录' }}</text>
					<view class="user-tag" v-if="userInfo?.vipLevel > 0">
						<text class="tag-text">VIP{{ userInfo?.vipLevel }}</text>
					</view>
				</view>
				<view class="login-btn" v-if="!isLogin" @click="handleLogin">
					<text>登录/注册</text>
				</view>
			</view>

			<!-- Features Grid -->
			<view class="feature-section">
				<view class="feature-grid">
					<view class="feature-item" @click="navigateTo('/pages/my/resume')">
						<text class="iconfont icon-wodejianli" style="font-size: 60rpx;"></text>
						<text class="feature-name">我的简历</text>
					</view>
					<view class="feature-item" @click="confirmLogout">
						<text class="iconfont icon-tuichudenglu" style="font-size: 60rpx;"></text>
						<text class="feature-name">退出登录</text>
					</view>
					<!-- <view class="feature-item" @click="navigateTo('/pages/my/favorite')">
						<text class="iconfont icon-ego-favorite" style="font-size: 60rpx;"></text>
						<text class="feature-name">我的收藏</text>
					</view>
					<view class="feature-item" @click="navigateTo('/pages/my/order')">
						<text class="iconfont icon-dingdanjilu" style="font-size: 60rpx;"></text>
						<text class="feature-name">订单记录</text>
					</view>
					<view class="feature-item" @click="navigateTo('/pages/template/list')">
						<text class="iconfont icon-jianlimoban-zhihui" style="font-size: 60rpx;"></text>
						<text class="feature-name">简历模板</text>
					</view> -->
				</view>
			</view>

			<!-- Settings List -->
			<view class="settings-section">
				<!-- <view class="settings-item" @click="navigateTo('/pages/my/settings')">
					<text class="iconfont icon-shezhi" style="margin-right: 40rpx;"></text>
					<text class="settings-name">设置</text>
					<text class="arrow">›</text>
				</view>
				<view class="settings-item" @click="navigateTo('/pages/my/feedback')">
					<text class="iconfont icon-yijianfankui" style="margin-right: 40rpx;"></text>
					<text class="settings-name">意见反馈</text>
					<text class="arrow">›</text>
				</view> -->
				<view class="settings-item" @click="showAbout">
					<text class="iconfont icon-bangzhuguanyuwomen" style="margin-right: 40rpx;"></text>
					<text class="settings-name">关于我们</text>
					<text class="arrow">›</text>
				</view>
			</view>

			<!-- Version Info -->
			<!-- <view class="version-info">
				<text>版本 1.0.0</text>
			</view> -->

			<!-- Logout Confirmation -->
			<uni-popup ref="logoutPopup" type="dialog">
				<uni-popup-dialog title="退出登录" content="确定要退出登录吗？" :before-close="false" @confirm="logout"
					@close="closeLogoutPopup"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useAuthStore
	} from '@/store/index.js'
	import NavHeader from '@/components/nav-header.vue'
	import {
		getToken,
		saveToken,
		removeToken
	} from '@/utils/auth';

	const userStore = useAuthStore()
	const statusBarHeight = ref(20)
	const logoutPopup = ref(null)

	// 用户信息
	const userInfo = ref({
		nickname: '',
		avatar: '',
		vipLevel: 0
	})
	const isLogin = ref(false)

	onMounted(() => {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync()
		statusBarHeight.value = systemInfo.statusBarHeight
		userStore.getInfoData()
		// 获取用户信息
		// loadUserInfo()
	})

	// 新增：tabbar页面每次切换回来都刷新用户信息
	onShow(() => {
		loadUserInfo()
	})

	// 加载用户信息
	const loadUserInfo = () => {
		// 从Store获取用户信息
		userInfo.value = uni.getStorageSync('loginInfo').user
		isLogin.value = uni.getStorageSync('isLogined') || false
		console.log('userInfo.value：', userInfo.value);
		console.log('isLogin.value：', isLogin.value);
	}

	// 处理登录
	const handleLogin = () => {
		uni.redirectTo({
			url: '/pages/login/index'
		})
	}

	// 确认退出登录
	const confirmLogout = () => {
		if (getToken()) {
			logoutPopup.value.open()
		} else {
			uni.showToast({
				title: '您尚未登录',
				icon: 'none'
			})
		}
	}

	// 关闭退出登录弹窗
	const closeLogoutPopup = () => {
		logoutPopup.value.close()
	}

	// 退出登录
	const logout = () => {
		userStore.logout()
		uni.removeStorageSync('loginInfo') // 清除本地用户信息
		uni.removeStorageSync('isLogined') // 清除登录状态

		// 提示
		uni.showToast({
			title: '已退出登录',
			icon: 'success'
		})

		// 返回首页
		setTimeout(() => {
			uni.switchTab({
				url: '/pages/index/index'
			})
		}, 1500)
	}

	// 页面导航
	const navigateTo = (url) => {
		uni.navigateTo({
			url
		})
	}

	// 显示关于我们
	const showAbout = () => {
		uni.showModal({
			title: '关于我们',
			content: '这是一款专业的简历制作小程序，帮助用户轻松创建精美的简历。\n\n版权所有 © 2025 简历制作',
			showCancel: false,
			confirmText: '确定'
		})
	}
</script>

<style lang="scss" scoped>
	.my-page {
		min-height: 100vh;
		background-color: #F8F8F8;

		.content {
			padding: 16px;
		}

		.user-profile {
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			border-radius: 12px;
			padding: 20px;
			margin-bottom: 16px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

			.avatar-container {
				position: relative;
				width: 64px;
				height: 64px;
				margin-right: 16px;

				.avatar {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					border: 2px solid #fff;
					box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
				}
			}

			.user-info {
				flex: 1;

				.username {
					font-size: 18px;
					font-weight: 500;
					color: #333;
					margin-bottom: 4px;
					display: block;
				}

				.user-tag {
					display: inline-flex;
					height: 20px;
					padding: 0 8px;
					background-color: #fff2e8;
					border-radius: 10px;
					align-items: center;
					justify-content: center;

					.tag-text {
						font-size: 12px;
						color: #ff7536;
					}
				}
			}

			.login-btn {
				padding: 6px 12px;
				background-color: #5ac725;
				border-radius: 16px;

				text {
					font-size: 14px;
					color: #FFFFFF;
				}
			}
		}

		.feature-section {
			background-color: #FFFFFF;
			border-radius: 12px;
			padding: 16px;
			margin-bottom: 16px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

			.feature-grid {
				display: flex;
				flex-wrap: wrap;

				.feature-item {
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 12px 0;

					.feature-icon {
						width: 40px;
						height: 40px;
						margin-bottom: 8px;
					}

					.feature-name {
						font-size: 14px;
						color: #333;
					}
				}
			}
		}

		.settings-section {
			background-color: #FFFFFF;
			border-radius: 12px;
			padding: 0 16px;
			margin-bottom: 16px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

			.settings-item {
				display: flex;
				align-items: center;
				height: 56px;
				border-bottom: 1px solid #f5f5f5;

				&:last-child {
					border-bottom: none;
				}

				.settings-icon {
					width: 24px;
					height: 24px;
					margin-right: 12px;
				}

				.settings-name {
					flex: 1;
					font-size: 15px;
					color: #333;
				}

				.arrow {
					font-size: 20px;
					color: #ccc;
					transform: rotate(90deg);
				}
			}
		}

		.version-info {
			text-align: center;
			padding: 16px 0;

			text {
				font-size: 13px;
				color: #999;
			}
		}
	}
</style>